<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-10-12 19:35:45
 * @LastEditors: 吴竹叶 2107206923@qq.com
 * @LastEditTime: 2023-10-13 13:45:24
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\AlarmManagement\components\safety\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bg-white p-1">
    <custom-title :is-line="true" title="基本信息" />
    <div class="AlarmManagementDetail-base-info">
      <div v-for="(item, index) in descList" :key="index + 'base'">
        <custom-details-item v-if="item.type === 'all'||item.type === active || item.type.includes(active)" :icon="item.icon" :label="item.label" one-color :value="item.value" />
      </div>
    </div>
    <template v-if="active === '视频报警'">
      <custom-title :is-line="true" title="报警视频" />
      <custom-player :camera-code="attachmentPath" :video-box-id="attachmentPath" />
    </template>
    <custom-title :is-line="true" title="处置流程" />
    <div class="alarmFlow-timeline">
      <custom-timeline :alarm-type="code[$route.query.active]" :alarm-id="$route.query.monitorAlarmId" type="环保" :list="timeList" />
    </div>
  </div>
</template>
<script>
import customTimeline from '@/components/common/custom-timeline.vue'
import CustomPlayer from '@/components/common/custom-player.vue'
import {
  alarmFlow,
  OutputAlarmInfo,
  plateDeviceAlarmInfo,
  plateVideoAlarmInfo,
  plateWasteAlarmInfo
} from '@/api/commonPage/AlarmManagement'
import CustomTitle from '@/components/globals/custom-title.vue'
import CustomDetailsItem from '@/components/globals/custom-details-item.vue'

export default {
  components: {
    CustomDetailsItem,
    CustomTitle,
    customTimeline,
    CustomPlayer
  },
  inject: ['layout'],
  data() {
    return {
      active: this.$route.query.active,
      descList: [
        { type: 'all', field: 'companyName', label: '企业名称', icon: '&#xe725;', value: '/' },
        { type: 'all', field: 'eventType', label: '报警类别', icon: '&#xe87e;', value: '/' },
        { type: 'all', field: 'alarmLevel', label: '报警级别', icon: '&#xe696;', value: '/' },
        { type: 'all', field: 'alarmTime', label: '报警时间', icon: '&#xe685;', value: '/' },
        { type: 'all', field: 'isHandleTask', label: '是否生成处置任务', icon: '&#xe6b7;', value: '/' },
        { type: 'all', field: 'isFalseReport', label: '是否误报', icon: '&#xe6b7;', value: '/' },
        { type: '视频报警', field: 'cameraName', label: '设备名称', icon: '&#xe67a;', value: '/' },
        { type: '视频报警', field: 'cameraCode', label: '设备编号', icon: '&#xe67a;', value: '/' },
        { type: '固危废报警', field: 'cameraCode', label: '设备编号', icon: '&#xe6b7;', value: '/' },
        { type: '固危废报警', field: 'wasteName', label: '废物名称', icon: '&#xe6b7;', value: '/' },
        { type: '传感器报警', field: 'outputName', label: '排口', icon: '&#xe6b7;', value: '/' },
        { type: '传感器报警', field: 'alarmItem', label: '监测指标', icon: '&#xe6b7;', value: '/' },
        { type: '传感器报警', field: 'rangeValue', label: '允许值', icon: '&#xe6b7;', value: '/' },
        { type: '传感器报警', field: 'alarmDescribe', label: '报警描述', icon: '&#xe6b7;', value: '/' },
        { type: '传感器报警', field: 'itemValue', label: '报警值', icon: '&#xe6b7;', value: '/' },
        { type: '固危废报警', field: 'workName', label: '产生车间', icon: '&#xe6b7;', value: '/' },
        { type: '固危废报警', field: 'wasteCategory', label: '固危废类别', icon: '&#xe6b7;', value: '/' },
        { type: '固危废报警', field: 'generateValue', label: '产生量', icon: '&#xe6b7;', value: '/' },
        { type: '固危废报警', field: 'meterUnit', label: '计量单位', icon: '&#xe6b7;', value: '/' },
        // { type: '设备联动报警', field: 'productName', label: '生产设备', icon: '&#xe6b7;', value: '/' },
        // { type: '设备联动报警', field: 'sewageName', label: '治理设备', icon: '&#xe6b7;', value: '/' },
        { type: '设备联动报警', field: 'cameraCode', label: '设备编号', icon: '&#xe6b7;', value: '/' },
        { type: '设备联动报警', field: 'monitorName', label: '监测设备', icon: '&#xe6b7;', value: '/' },
        { type: '传感器报警', field: 'itemOtherValue', label: '其他指标', icon: '&#xe6b7;', value: '/' },
        { type: '传感器报警', field: 'lastItemValue', label: '上一时段', icon: '&#xe6b7;', value: '/' },
        { type: '传感器报警', field: 'deviceName', label: '设备名称', icon: '&#xe6b7;', value: '/' },
        { type: '传感器报警', field: 'cameraCode', label: '设备编号', icon: '&#xe67a;', value: '/' }
      ],
      attachmentPath: '',
      timeList: [],
      detailMap: {
        '传感器报警': OutputAlarmInfo,
        '视频报警': plateVideoAlarmInfo,
        '设备联动报警': plateDeviceAlarmInfo,
        '固危废报警': plateWasteAlarmInfo
      },
      code: {
        '传感器报警': 2,
        '视频报警': 1,
        '设备联动报警': 3,
        '固危废报警': 4
      }
    }
  },
  computed: {

  },
  mounted() {
    this.baseInfo()
    this.alarmFlow()
    // this.layout.hideLoading()
  },
  methods: {
    async baseInfo() {
      this.layout.showAreaLoading(['.AlarmManagementDetail-base-info'])
      // this.layout.showLoading()
      // const { status, data } = await this.detailMap[this.$route.query.active]({ monitorAlarmId: this.$route.query.monitorAlarmId })
      const _infoObj = {}
      if (this.$route.query.active === '传感器报警' || this.$route.query.active === '视频报警') {
        _infoObj.monitorAlarmId = this.$route.query.monitorAlarmId
      } else {
        _infoObj.alarmId = this.$route.query.monitorAlarmId
      }
      const { status, data } = await this.detailMap[this.$route.query.active](_infoObj)
      if (status === 0 && data) {
        this.descList.forEach(v => {
          v.value = data[v.field] ? data[v.field] : v.value
        })
        this.attachmentPath = data.attachmentPath
      }
      this.layout.hideAreaLoading(['.AlarmManagementDetail-base-info'])
    },
    async alarmFlow() {
      this.layout.showAreaLoading(['.alarmFlow-timeline'])
      const { status: alarmFlowStatus, data: alarmFlowData } = await alarmFlow({
        AlarmType: this.code[this.$route.query.active],
        monitorAlarmId: this.$route.query.monitorAlarmId
      })
      if (alarmFlowStatus === 0 && alarmFlowData) {
        this.timeList = alarmFlowData.map(val => {
          return {
            title: val.end_time_,
            msg: val.msg,
            name_: val.name_,
            activeNames: ['1'],
            assignee_: val.assignee_,
            inst_task_id: val.inst_task_id
          }
        })
      }
      this.layout.hideAreaLoading(['.alarmFlow-timeline'])
    }
  }
}
</script>
<style scoped lang="scss">
</style>
